
.page-add-btn {
  width: 150rpx;
  animation: dot-jump 0.5s linear;
  animation-delay: 500ms;
  animation-fill-mode: forwards;
  overflow: visible;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 52rpx;
  position: absolute;
  bottom: 0;
  &.click-down {
    background-color: #034dc5 !important;
  }
  .type-item {
    height: 0;
    width: 150rpx;
    overflow: hidden;
    box-sizing: border-box;
    transition: height 500ms;
    .iconfont {
      font-size: 48rpx;
    }
  }
  &.add-visible {
    .type-item {
      height: 150rpx;
      border-bottom: 1rpx solid #e5e5e5;
    }
  }
  &.edit-status {
    .type-item {
      height: 0;
    }
    .finish-edit {
      height: 150rpx;
    }
  }
  .add-btn-item {
    height: 150rpx;
  }

  @keyframes dot-jump {
    0% {
      background: #ffffff;
      color: #ffffff;
      transform: scale(1);
      box-shadow: -3rpx -3rpx 10rpx rgba(0, 0, 0, 0.1);
    }
    100% {
      transform: scale(0.7);
      box-shadow: -3rpx -3rpx 15rpx rgba(0, 0, 0, 0.4);
      color: #ffffff;
      background: #3c88ff;
    }
  }

  .show-animate {
    animation: rotate-show .3s linear;
    animation-fill-mode: forwards;
  }
  .hide-animate {
    animation: rotate-hide .3s linear;
    animation-fill-mode: forwards;
  }

  @keyframes rotate-hide {
    from {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(0deg);
    }
  }
  @keyframes rotate-show {
    from {
      transform: rotate(00deg);
    }
    to {
      transform: rotate(180deg);
    }
  }
}